<template>
  <div  class="page-layout">
   <h1>DvBox</h1>
   <p>大屏页面布局组件</p>
   <h2>主要功能</h2>
   <ul>
    <li>排版布局</li> 
   </ul>

  

   <h2>基础使用</h2>
   <div style="width: 1000px;  ">
    <demo-warp>
      <dv-page target="parent" fit>
        <dv-box frame width="400px" height="200px" left="100px" top="100px" style="background: rgba(255,0,0,0.2)">
          <template v-slot:title>
            <div >标题</div>
          </template>
          
          <div style="height: 100%; overflow: auto">
            <ul>
              <li v-for="i in 100" :key="i">{{i}}</li>
            </ul>
          </div>
         
          <template v-slot:footer>
            <div >底部</div>
          </template>
        </dv-box> 
        <!-- <dv-box width="100px"
                  height="100px"
                  x-align="center"
                  y-align="middle"
                  :zoom="4" 
                  style="background: rgba(255,0,0,0.2)"></dv-box>  -->
      </dv-page>
    </demo-warp> 
   </div> 

   <h2>example2：对齐方式</h2>
   <div style="width: 1000px;  ">
    <demo-warp>
      <dv-page target="parent" fit>
        <dv-box style="background: blue; padding: 10px" x-align="left" y-align="top">left top</dv-box> 
        <dv-box style="background: blue; padding: 10px" x-align="center" y-align="top">center top</dv-box>
        <dv-box style="background: blue; padding: 10px" x-align="right" y-align="top">right top</dv-box> 
        <dv-box style="background: blue; padding: 10px" x-align="left" y-align="middle">left middle</dv-box> 
        <dv-box style="background: blue; padding: 10px" x-align="center" y-align="middle">center middle</dv-box>
        <dv-box style="background: blue; padding: 10px" x-align="right" y-align="middle">right middle</dv-box> 
        <dv-box style="background: blue; padding: 10px" x-align="left" y-align="bottom">left bottom</dv-box> 
        <dv-box style="background: blue; padding: 10px" x-align="center" y-align="bottom">center bottom</dv-box>
        <dv-box style="background: blue; padding: 10px" x-align="right" y-align="bottom">right bottom</dv-box> 
      </dv-page>
    </demo-warp> 
   </div>

   <h2>example3：内联和边距</h2>
   <div style="width: 1000px;  ">
    <demo-warp>
      <dv-page target="parent" fit>
        <dv-box v-for="n in 20"
                  :key="n"
                  :position="false"
                  inline
                  margin="20px"
                  width="100px"
                  height="100px"
                  style="background: rgba(255,0,0,0.2)">{{n}}</dv-box> 
      </dv-page>
    </demo-warp> 
   </div>

   <h2>example4：排版布局</h2>
   <div style="width: 1000px;  ">
    <demo-warp>
      <dv-page target="parent" fit>
        <dv-box style="border:1px solid red" layout :gap="20" left="20px" top="20px" height="calc(100% - 40px)" width="30%">
          <dv-box style="border:1px solid" width="100%" :weight="1"></dv-box>
          <dv-box style="border:1px solid" width="100%" :weight="2"></dv-box>
          <dv-box style="border:1px solid" width="100%" :weight="1"></dv-box>
       </dv-box>
       <dv-box  style="border:1px solid red" layout direction="column" :gap="20" right="20px" top="20px" height="calc(100% - 40px)" width="50%">
          <dv-box style="border:1px solid" height="100%" :weight="1"></dv-box>
          <dv-box style="border:1px solid" height="100%" :weight="2"></dv-box>
          <dv-box style="border:1px solid" height="100%" :weight="1"></dv-box>
       </dv-box> 
      </dv-page>
    </demo-warp> 
   </div>

   <h2>example5：边框</h2>

   <div style="width: 95%; " class="border-sample-warp">
    <demo-warp>
      <dv-page target="parent" >
        <dv-box layout :gap="20" left="20px" top="20px" height="calc(50% - 40px)" width="calc(100% - 40px)"  direction="column"> 
          <dv-box border="1" height="100%" :weight="1" >
            &lt;dv-box border="1"&gt;
          </dv-box>
          <dv-box border="2" height="100%" :weight="1">
            &lt;dv-box border="2"&gt;
          </dv-box>
          <dv-box border="3" height="100%" :weight="1">
            &lt;dv-box border="3"&gt;
          </dv-box>
        </dv-box>
        <dv-box  layout :gap="20" left="20px" top="calc(50% + 0px)" height="calc(50% - 20px)" width="calc(100% - 40px)"  direction="column"> 
          <dv-box border="4" height="100%" :weight="1">
            &lt;dv-box border="4"&gt;
          </dv-box>
          <dv-box border="5" height="100%" :weight="1">
            &lt;dv-box border="5"&gt;
          </dv-box> 
          <dv-box border="6" height="100%" :weight="1">
            &lt;dv-box border="6"&gt;
          </dv-box> 
        </dv-box>
        
      </dv-page>
    </demo-warp> 
   </div>
   <br/><br/>
   <div style="width: 95%;  " class="border-sample-warp">
    <demo-warp>
      <dv-page target="parent" >
        <dv-box layout :gap="20" left="20px" top="20px" height="calc(50% - 40px)" width="calc(100% - 40px)"  direction="column"> 
          <dv-box border="7" height="100%" :weight="1">
            &lt;dv-box border="7"&gt;
          </dv-box>
          <dv-box border="8" height="100%" :weight="1">
            &lt;dv-box border="8"&gt;
          </dv-box>
          <dv-box border="9" height="100%" :weight="1">
            &lt;dv-box border="9"&gt;
          </dv-box>
        </dv-box>
        <dv-box  layout :gap="20" left="20px" top="calc(50% + 0px)" height="calc(50% - 20px)" width="calc(100% - 40px)"  direction="column"> 
          <dv-box border="10" height="100%" :weight="1" title="边框10" :title-width="160">
            &lt;dv-box border="10" title="边框10" :title-width="160" &gt;
          </dv-box>
          <dv-box border="11" height="100%" :weight="1">
            &lt;dv-box border="11"&gt;
          </dv-box> 
          <dv-box border="12" height="100%" :weight="1">
            &lt;dv-box border="12"&gt;
          </dv-box> 
        </dv-box>
        
      </dv-page>
    </demo-warp> 
   </div>

   <h2>组件参数</h2>
   <pre> 
      width: String, // 宽

      height: String,  // 高
      
      defaultWidth: { // 默认宽
        type: String,
        default: 'auto'
      },
      
      defaultHeight: {  // 默认高
        type: String,
        default: 'auto'
      },
      
      left: {
        type: [String, Number]
      },
      
      top: {
        type: [String, Number]
      },
      
      right: [String, Number],
      
      bottom: [String, Number],
      
      zIndex: [Number, String],
      
      xAlign: {
        type: String,
        validator(val) {
          return ['left', 'right', 'center'].includes(val)
        }
      },
      
      yAlign: {
        type: String,
        validator(val) {
          return ['top', 'bottom', 'middle'].includes(val)
        }
      },
      
      contentAlign: {
        type: String,
        default: 'left',
        validator(val) {
          return ['left', 'right', 'center'].includes(val)
        }
      },
      
      zoom: Number, // 如果设置 x-align 或 y-align ，scale将失效, 此时可以通过设置zoom实现缩放
      
      scale: Number, // 设置了 fit， width、height 、top、left 将失效
      
      fit: Boolean, // 自适应父元素高度
      
      visible: { // 显示隐藏切换
        type: Boolean,
        default: true
      }, 
      
      position: { // 启用定位
        type: Boolean,
        default: true
      },
      
      margin: String,
      
      padding: String,
      
      inline: Boolean, // 默认 false
      
      opacity: { 
        type: Number,
        default: 1
      },
      
      shadow: Boolean,
      
      layout: Boolean,
      
      weight: {
        type: Number,
        default: 1
      },
      
      gap: { 
        type: Number,
        default: 0
      },
      
      direction: { // 排列方向
        type: String,
        default: 'row',
        validator(v) {
          return ['row', 'column'].includes(v)
        }
      },
      
      free: Boolean,
      
      // 启用自身布局功能，设置为true后，支持使用 title 和 footer slot
      frame: {
        type: Boolean,
        default: false
      }  
   
   </pre>
  </div> 
    
</template>
<script setup lang="ts" >
import {DvPage, DvBox} from '$comp/index';
// import demoWarp from '@/components/demo-warp.vue';
</script>
<style lang="scss" scoped>
 .page-layout{
  height: 100%;

  .border-sample-warp{
    .dv-box{
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
 }
</style>